<template>
  <div class="common-layout">
    <div class="box">
      <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
          <el-image
            src="http://101.132.181.9/img/logo.c8999c02.png"
            lazy
            style="width: 235px; height: 75px"
            class="el-image"
          ></el-image>
          <div class="link">
            <router-link :to="{ name: 'firsthome' }" class="router-link"
              >首页</router-link
            >
            <router-link :to="{ name: 'commodity' }" class="router-link"
              >商品</router-link
            >
            <router-link :to="{ name: 'orders' }" class="router-link"
              >订单</router-link
            >
            <router-link :to="{ name: 'my' }" class="router-link"
              >我的</router-link
            >
          </div>
          <div class="search">
            <el-input
              placeholder="请输入搜索内容"
              v-model="search"
              class="input-with-select"
            >
              <template #append>
                <el-button @click="searchClick">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
          </div>
        </el-header>
        <!-- 内容部分 -->
        <el-main style="padding-bottom: 0">
          <mainCom v-show="isShow" class="mainCom"> </mainCom>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
    <!-- 底部 -->
    <el-footer class="el-footer">
      <div class="footer">
        <div class="ng-promise-box">
          <div class="ng-promise">
            <p class="text" style="margin-top: 0">
              <a class="icon1" href="javascript:;">预约维修服务</a>
              <a class="icon2" href="javascript:;">7天无理由退货</a>
              <a class="icon3" style="margin-right: 0" href="javascript:;"
                >15天免费换货</a
              >
            </p>
          </div>
        </div>
        <div class="github"></div>
        <div class="mod_help">
          <p>
            <router-link :to="{ name: 'firsthome' }">首页</router-link>
            <span>|</span>
            <router-link :to="{ name: 'commodity' }">商品</router-link>
            <span>|</span>
            <router-link :to="{ name: 'orders' }">订单</router-link>
            <span>|</span>
            <router-link :to="{ name: 'my' }">我的</router-link>
          </p>
          <p class="coty">商城版权所有 &copy; 2000-2022</p>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script>
import mainCom from '@/components/mainCom.vue'
import { Search } from '@element-plus/icons-vue'
export default {
  components: {
    Search,
    mainCom
  },
  data() {
    return {
      isShow: true,
      search: '' // 搜索条件
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        // 当路由name不是firstname时轮播图隐藏 否则显示
        if (val.name !== 'firsthome') {
          this.isShow = false
        } else {
          this.isShow = true
        }
      }
    }
  },
  methods: {
    // 搜索
    searchClick() {
      if (this.search != '') {
        // 跳转到全部商品页面,并传递搜索条件
        this.$router.push({ name: 'commodity', query: { search: this.search } })
        this.search = ''
      } else {
        alert('搜索内容不能为空')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 80%;
  background: #fff;
  margin: auto;
  /* 头部容器CSS */
  .el-header {
    background: #fff;
    height: 115px;
    border-bottom: 1px solid #ccc;
    .el-image {
      position: absolute;
      top: 35px;
    }
    .input-with-select {
      position: absolute;
      top: 67px;
      right: 10%;
      width: 300px;
    }
    .link {
      position: absolute;
      top: 77px;
      left: 560px;
      .router-link {
        float: left;
        text-align: center;
        display: block;
        width: 86px;
        padding-bottom: 20px;
        color: rgb(178, 176, 176);
        line-height: 16px;
        text-decoration: none;
      }
      .router-link:hover {
        border-bottom: 2px solid rgb(18, 164, 222);
        color: rgb(18, 164, 222);
      }
    }
  }
  /* 头部容器CSS结束 */
  .mainCom {
    height: 527px;
  }
}

/* 底栏容器CSS */
.el-footer {
  padding: 0;
}
.footer {
  width: 100%;
  text-align: center;
  background: #2f2f2f;
  padding-bottom: 20px;
}
.footer .ng-promise-box {
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}
.footer .ng-promise-box {
  margin: 0 auto;
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}
.footer .ng-promise-box .ng-promise p a {
  color: #fff;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url('./assets/imgs/us-icon.png') no-repeat left 0;
}
.footer .github {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}
.footer .mod_help {
  text-align: center;
  color: #888888;
}
.footer .mod_help p {
  margin: 20px 0 16px 0;
}

.footer .mod_help p a {
  color: #888888;
  text-decoration: none;
}
.footer .mod_help p a:hover {
  color: #fff;
}
.footer .mod_help p span {
  padding: 0 22px;
}
</style>
